<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timetable part</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style/association.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/course.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/timetable.css') }}">
</head>

<body>
    <div class="ass" onclick="hideEditFn()">
        <div class="ass-con">
            <div class="ass-header">
                <div class="ass-left">
                    <div>
                        <span class="ass-logo">logo</span>
                        <span class="ass-school">{{ school }}</span>
                    </div>
                    <div class="ass-center">
                        <p class="ass-pic-c">
                            <img src="{{ url_for('get_avatar', filename=user.avatar) }}" alt="">
                        </p>
                        <div>
                            <p class="ass-hi">Hi, {{ user.name }}</p>
                            <p class="ass-1">welcome to {{ school }}, keep good work</p>
                        </div>
                    </div>
                </div>
                <div class="ass-right">
                    <input class="ass-input" type="text" placeholder="search">
                    <a href="{{ url_for('auth.login') }}">
                        <button class="sign-in-btn">Sign Out</button>
                    </a>
                </div>
            </div>
            <div class="ass-contents">
                <div class="ass-content">
                    <div class="grade-left">
                        <div class="find-teacher-header">
                            <p>
                                This week's schedule
                                <span class="grade-time-tips">
                                    March 21 —March 27
                                </span>
                            </p>
                            <div class="semester-con">
                                <p>
                                    <span>First semester</span>
                                    <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                </p>
                                <p>
                                    <span>Second semester</span>
                                    <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                </p>
                                <p>
                                    <span>Third semester</span>
                                    <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                </p>
                            </div>
                        </div>
                        <div class="time-cons">
                            <div class="time-con-list">
                                <div class="time-left">
                                    <p class="time-top"> </p>
                                    <p class="time-left-list"><span>08 am</span></p>
                                    <p class="time-left-list"><span>09 am</span></p>
                                    <p class="time-left-list"><span>10 am</span></p>
                                    <p class="time-left-list"><span>11 am</span></p>
                                    <p class="time-left-list active"><span>12 am</span></p>
                                    <p class="time-left-list"><span>01 pm</span></p>
                                    <p class="time-left-list"><span>02 pm</span></p>
                                    <p class="time-left-list"><span>03 pm</span></p>
                                    <p class="time-left-list"><span>04 pm</span></p>
                                    <p class="time-left-list"><span>05 pm</span></p>
                                </div>
                            </div>
                            <div class="time-con-list">
                                <p class="time-top">Mon</p>
                                <a class="time-left-card time-gray-green" href="/course/lesson/3">
                                    <p class="time-left-title">
                                        8:00-10:30
                                        <br>
                                        T -221
                                    </p>
                                    <p class="time-left-remart">
                                        Computer Programming Course work 2
                                    </p>
                                </a>
                                <a class="time-left-card time-gray-green" href="/course/lesson/3">
                                    <p class="time-left-title">
                                        2:00-3:30
                                        <br>
                                        T -221
                                    </p>
                                    <p class="time-left-remart">
                                        Interactive design Course work2
                                    </p>
                                </a>
                            </div>
                            <div class="time-con-list">
                                <p class="time-top">Tue</p>
                                <a class="time-left-card time-gray-pink" href="/course/lesson/3">
                                    <p class="time-left-title">
                                        8:00-10:30
                                        <br>
                                        T -221
                                    </p>
                                    <p class="time-left-remart">
                                        Database System Course work 2
                                    </p>
                                </a>
                            </div>
                            <div class="time-con-list">
                                <p class="time-top">Wed</p>

                                <a class="time-left-card time-gray-gray" href="/course/lesson/3">
                                    <p class="time-left-title">
                                        8:00-10:30
                                        <br>
                                        T -221
                                    </p>
                                    <p class="time-left-remart">
                                        Risk and Decision Course work2
                                    </p>
                                </a>

                            </div>
                            <div class="time-con-list">
                                <p class="time-top">Thu</p>

                                <a class="time-left-card time-gray-orange" href="/course/lesson/3">
                                    <p class="time-left-title">
                                        8:00-10:30
                                        <br>
                                        T -221
                                    </p>
                                    <p class="time-left-remart">
                                        Security And Authentication
                                    </p>
                                </a>
                            </div>
                            <div class="time-con-list">
                                <p class="time-top">Fir</p>

                                <a class="time-left-card time-gray-purple" href="/course/lesson/3">
                                    <p class="time-left-title">
                                        8:00-10:30
                                        <br>
                                        T -221
                                    </p>
                                    <p class="time-left-remart">
                                        Business Information System
                                    </p>
                                </a>
                            </div>
                            <div class="time-con-lines"></div>

                        </div>
                    </div>
                    <div class="grade-right">
                        <div class="time-right-con">
                            <div class="time-title">
                                <span class="time-times">
                                    Monday may 4,
                                </span>
                                <div class="edit-cons">
                                    <p class="time-edit" onclick="showEditFn()">edit</p>
                                    <div class="edit-con">
                                        <p class="edit-con-title">
                                            New event
                                        </p>
                                        <div class="edit-con-list">
                                            <p class="edit-name">
                                                event name
                                            </p>
                                            <input type="text" placeholder="New event">
                                        </div>
                                        <div class="edit-con-list">
                                            <p class="edit-name">
                                                Time
                                            </p>
                                            <input type="text" placeholder="7:10AM-10:00AM ">
                                        </div>
                                        <div class="edit-con-list">
                                            <p class="edit-name">
                                                Remarks
                                            </p>
                                            <input type="text" placeholder="speaking club ">
                                        </div>
                                        <button class="add-event"> Add event</button>
                                    </div>
                                </div>
                            </div>
                            <div class="timetable-con">
                                <div>
                                    <div class="timetable-side">
                                        <p>8 am</p>
                                        <p>9 am</p>
                                        <p>10 am</p>
                                        <p>11 am</p>
                                        <p>12 am</p>
                                    </div>
                                    <div class="timetable-side">
                                        <p>2 am</p>
                                        <p>3 am</p>
                                        <p>4 am</p>
                                        <p>7 am</p>
                                        <p>9 am</p>
                                    </div>
                                </div>
                                <div class="timetable-right">
                                    <div class="timetable-card timetable-purple">
                                        <div class="timetable-line"></div>
                                        <a href="/course/lesson/3">
                                            <p class="timetable-time">
                                                8-10am
                                                <img src="{{ url_for('static', filename='img/003.svg') }}" alt="">
                                            </p>
                                            <p class="timetable-title">
                                               Computer Programming Course work 2
                                            </p>
                                            <p class="timetable-tip">
                                                this lession is design for english
                                                level 12
                                            </p>
                                        </a>
                                    </div>
                                    <div class="timetable-card timetable-blue">
                                        <div class="timetable-line"></div>
                                        <a href="/course/lesson/3">
                                            <p class="timetable-time">
                                                11-12am
                                                <img src="{{ url_for('static', filename='img/003.svg') }}" alt="">
                                            </p>
                                            <p class="timetable-title">
                                                Computer Programming Course work 2
                                            </p>
                                        </a>
                                    </div>
                                    <div class="timetable-card timetable-pink">
                                        <div class="timetable-line"></div>
                                        <a href="/course/lesson/3">
                                            <p class="timetable-time">
                                                2:30-4:00 pm
                                                <img src="{{ url_for('static', filename='img/003.svg') }}" alt="">
                                            </p>
                                            <p class="timetable-title">
                                                Interactive design Course work2
                                            </p>
                                            <p class="timetable-tip">
                                                this lession is design for english
                                                level 12
                                            </p>
                                        </a>
                                    </div>
                                    <div class="timetable-card timetable-blue">
                                        <div class="timetable-line"></div>
                                        <a href="/course/lesson/3">
                                            <p class="timetable-time">
                                                7：00-9:00 pm
                                                <img src="{{ url_for('static', filename='img/003.svg') }}" alt="">
                                            </p>
                                            <p class="timetable-title">
                                                Interactive design Course work2
                                            </p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ass-side">
                    <ul class="ass-side-list">
                        <li>
                            <a href="{{ url_for('student.course') }}">
                                <span class="ass-icon"></span>
                                my course
                            </a>
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            my task
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            notification
                        </li>
                        <li class="active">
                            <a href="{{ url_for('student.timetable') }}">
                                <span class="ass-icon"></span>
                                timetable
                            </a>
                        </li>
                    </ul>
                    <ul class="ass-side-list">
                        <li>
                            <a href="{{ url_for('student.grade') }}">
                                <span class="ass-icon"></span>
                                grades
                            </a>
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            homework
                        </li>
                    </ul>
                    <ul class="ass-side-list">
                        <li>
                            <a href="{{ url_for('student.social') }}">
                                <span class="ass-icon"></span>
                                Social
                            </a>
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            Societies
                        </li>
                    </ul>
                    <div class="ass-workplace">
                        <p>workplace</p>
                        <button>
                            <span>forum</span>
                            <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                <path
                                    d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                </path>
                            </svg>
                        </button>
                        <button>
                            <span>My upload</span>
                            <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                <path
                                    d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                </path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script
      src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script>
        function showEditFn(obj, event) {
            stopP(event)
            $(".edit-con").addClass("show");
        }

        function stopP(e) {
            var evt = e || window.event;
            evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
        }

        function hideEditFn() {
            $(".edit-con").removeClass("show")
        }

        function selectSemesterFn(num, event) {
            stopP(event)
            for (var i = -1; i < 2; i++) {
                $(".semester-con p").eq(i).removeClass("active")
            }
            $(".semester-con p").eq(num).addClass("active")
            $(".semes").text($(".semester-con p").eq(num).text())
        }
    </script>
</body>

</html>